<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="150px" :rules="nodeModalRules"
    size="small">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <table border="1" align="center" class="add_table w_100" cellspacing="0">
          <tr>
            <th width="70"><span class="iconfont icon-Add cursor_point" @click="handleAddUnion"></span></th>
            <th>源目标({{ node.sourceNode.name }})</th>
            <th>源目标({{ node.originNode.name }})</th>
            <th>别名</th>
          </tr>
          <tr v-for="(item,index) in nodeModalForm.union" :key="index">
            <td width="70" align="center">
              <span class="iconfont icon-Add cursor_point px_2" @click="handleAddUnion(index)"></span>
              <span class="iconfont icon-close cursor_point px_2" @click="handleDeleteUnion(index)"></span>
            </td>
            <td>
              <el-select v-model="item.sourceField" clearable filterable placeholder="字段" class="w_100"
                @visible-change="sourceFieldVisible($event,index)" @change="sourceFieldChange(index)">
                <el-option v-for="item in sourceFieldList" :key="item.name" :label="item.alias" :value="item.alias">
                  <span style="float: left">{{ item.alias }}</span>
                  <span style="float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;">{{ item.DATA_TYPE }}</span>
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.originField" filterable placeholder="字段" class="w_100"
                @visible-change="originFieldVisible($event,index)" @change="originFieldChange(index)">
                <el-option v-for="item in originFieldList" :key="item.alias" :label="item.alias" :value="item.alias">
                  <span style="float: left">{{ item.alias }}</span>
                  <span style="float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;">{{ item.DATA_TYPE }}</span>
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input v-model.trim="item.alias" clearable></el-input>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { useEtlStore } from "../../../../../store/flowEtl";

export default defineComponent({
  name: "node-config-union",
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const etlStore = useEtlStore();
    const sourceFieldList = ref([]);
    const originFieldList = ref([]);
    const sourceFields = ref([]);
    const originFields = ref([]);
    const nodeList = computed(() => etlStore.nodeList);
    const nodeConfigClose = inject("nodeConfigClose");
    const fieldsList = ref([]);
    const typeList = ref([]);
    const nodeModalForm = ref({
      nodeName: "",
      union: [],
    });
    const nodeModal = ref();
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入数据源名称",
        trigger: "blur",
      },
    });
    const handleConfigCancel = () => {
      nodeConfigClose();
    };
    const nodeConfigUpdate = (node) => {
      if (!nodeModalForm.value.union.length) {
        ElMessage.error("请选择要展示列");
        return;
      }
      let aliasArr = nodeModalForm.value.union.map((item) => item.alias);
      if (new Set([...aliasArr]).size !== aliasArr.length) {
        ElMessage.error("请修改重复的别名");
        return;
      }
      let valid = nodeModalForm.value.union.filter((item) => {
        return !item.sourceField || !item.originField || !item.alias;
      });
      if (valid.length) {
        ElMessage.error("数据请配置完整！！！");
        return;
      }
      let configFields = nodeModalForm.value.union.map((item, index) => {
        return {
          COLUMN_COMMENT: `${item.sourceField},${item.originField}`,
          COLUMN_NAME: item.alias,
          DATA_TYPE: typeList.value[index],
          alias: item.alias,
        };
      });
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true;
          item.nodeName = node.nodeName;
          item.config.union = node.union;
          item.config.fields = configFields;
        }
        return item;
      });
      etlStore.setNodeList(nodes);
      nodeConfigClose();
    };
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value);
        } else {
          return false;
        }
      });
    };
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        union: [],
      };
      fieldsList.value = [];
      originFields.value = [];
      sourceFields.value = [];
    };
    const handleSelectionChange = (val) => {
      nodeModalForm.value.fields = [];
      nodeModalForm.value.fields = val;
    };
    const handleAddUnion = (index) => {
      if (index) {
        nodeModalForm.value.union = [
          ...nodeModalForm.value.union.splice(0, index + 1),
          {
            sourceField: "",
            originField: "",
            alias: "",
          },
          ...nodeModalForm.value.union.splice(
            index - 1,
            nodeModalForm.value.union.length
          ),
        ];
      } else {
        nodeModalForm.value.union.push({
          sourceField: "",
          originField: "",
          alias: "",
        });
        typeList.value = [
          ...typeList.value.splice(0, index + 1),
          undefined,
          ...typeList.value.splice(index - 1, typeList.value.length),
        ];
      }
    };
    const handleDeleteUnion = (index) => {
      nodeModalForm.value.union.splice(index, 1);
      typeList.value.splice(index, 1);
    };
    const sourceFieldVisible = (val, index) => {
      if (val) {
        if (nodeModalForm.value.union[index].originField) {
          sourceFieldList.value = sourceFields.value.filter(
            (item) => item.DATA_TYPE === typeList.value[index]
          );
        } else {
          sourceFieldList.value = sourceFields.value;
        }
      }
    };
    const sourceFieldChange = (index) => {
      if (nodeModalForm.value.union[index].sourceField) {
        typeList.value[index] = sourceFields.value.find(
          (item) => item.alias === nodeModalForm.value.union[index].sourceField
        ).DATA_TYPE;
      }
    };
    const originFieldVisible = (val, index) => {
      if (val) {
        if (nodeModalForm.value.union[index].sourceField) {
          originFieldList.value = originFields.value.filter(
            (item) => item.DATA_TYPE === typeList.value[index]
          );
        } else {
          originFieldList.value = originFields.value;
        }
      }
    };
    const originFieldChange = (index) => {
      if (nodeModalForm.value.union[index].originField) {
        typeList.value[index] = originFields.value.find(
          (item) => item.alias === nodeModalForm.value.union[index].originField
        ).DATA_TYPE;
      }
    };
    onMounted(() => {
      resetForm();
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
        union: props.node.config.union,
      };
      fieldsList.value = props.node.originFields;
      originFields.value = fieldsList.value.filter((item) => {
        return item.join === "origin";
      });
      sourceFields.value = fieldsList.value.filter((item) => {
        return item.join === "source";
      });
    });
    return {
      nodeList,
      nodeModalForm,
      nodeModalRules,
      nodeModal,
      sourceFields,
      originFields,
      fieldsList,
      typeList,
      sourceFieldList,
      originFieldList,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      handleSelectionChange,
      handleDeleteUnion,
      handleAddUnion,
      nodeConfigClose,
      sourceFieldChange,
      originFieldChange,
      originFieldVisible,
      sourceFieldVisible,
    };
  },
});
</script>

<style lang="less" scoped>
.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}

.join_type {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}

// 5F83D3 EA7D59
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.source_dot {
  background-color: #5f83d3;
}

.origin_dot {
  background-color: #ea7d59;
}
</style>